<script setup>

import UserName from './components/UserName.vue';
import Password from './components/Password.vue';
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue';

const count = ref(0);


</script>

<template>
  <div class="w">
    <div class="center">
      <div class="main">
        <p class="title">Log in to your account</p>
        <p >Welcome back! Please enter your details</p>
       
        <div class="login">
          <p class="username" style="font-size: 15px; padding-top: 30px;">Username</p>
          <UserName />
          <p class="password" style="font-size: 15px; padding-top: 10px; ">Password</p>
          <Password />
          <button class="login-button">Login</button>

        </div>

      </div>
    </div>
  </div>
</template>

<style lang="css">

* {
  padding:0;
  margin: 0;
}

.w {
  height: 100vh;
  width: 100vw;
  background-color: #f3f3f3;
}

.center {
  width: 650px;
  height: 100vh;
  margin: auto;
  background-color: #f3f3f3;
  display: flex;
  align-items: center
  ;}

.main {
  height: 420px;
  width: 100%;
  background-color: #f3f3f3;
  text-align: center;
  
}

.username, .password {
  text-align: left;
  margin-left: 30px;
}

.main p:first-child {
  font-size: 22px;
  margin-bottom: 12px;
}

.main p:nth-child(2) {
  font-size: 15px;
  color: #6c6c6c;
  margin-bottom: 22px;
}

/* 上下空340 */
.login {
  background-color: #ffffff;
  width: 480px;
  height: 336px;
  margin: 0 auto;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 2px 8px  rgba(91, 91, 91, 0.1);;
}

.login-button {
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  background-color: #4986C3;
  width: 420px;
  height: 48px;
  font-size: 21px;
  font-weight: 100;
  text-align: center;
}
</style>
